<template>
  
	<view class="money-page">

		<!-- 有数据时的列表 -->

			<view v-if="moneyList.length > 0" class="bg-white margin-b-70 mui-table-view record-list margin-t-0" id="credit-flow">
				<view class="mui-table-view-cell mui-media" v-for="(item, idx) in moneyList" :key="idx">
					<view class="margin-r-10 mui-pull-left">
					</view>
					<view class="mui-media-body">
						<view class="pd-name">
							<text class="font16 font-bold">
										{{ item.type_text }}
							</text>
							<view class="mui-pull-right" :style="{color: item.price > 0 ? '#28a745' : '#F00'}">
									{{ item.price }}
								<text class="font13">
									元
								</text>
							</view>
						</view>
						<view class="mui-row padding-t-5">
							<view class="mui-col-xs-6 mui-ellipsis pd-text">
								{{ item.remark }}
							</view>
							<view class="mui-col-xs-6 pd-text txt-right">
								{{ item.created_at }}
							</view>
						</view>
						<!-- <view class="mui-row padding-t-5">
							<view class="mui-col-xs-6 mui-ellipsis pd-text">
								结余
							</view>
							<view class="mui-col-xs-6 pd-text txt-right">
								{{ item.balance }}
							</view>
						</view> -->
					</view>
				</view>
			</view>
		<!-- 空态 -->
		<view v-else class="empty-box">
			<image class="empty-img" src="/static/mescroll-empty.png" mode="aspectFit" />
			<text class="empty-text">~到底了~</text>
		</view>
	</view>
	<view v-if="loading" class="loading-text">{{noMore}}</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { getUserMoneyList } from '@/api/member.js' // 假设有这个接口
	import { onReachBottom } from "@dcloudio/uni-app"
	const loading = ref(false)
	const page = ref(1);
	const pageSize = ref(10);
	const lastPage = ref(1);
	const noMore = ref("加载中...");
	const moneyList = ref([])

	function goBack() {
		uni.navigateBack()
	}


	const fetchMoneyList = async()=>{
		uni.showLoading({
			title: '加载中'
		});
		loading.value = true
		let params = {
			page:page.value,
			pageSize:pageSize.value
		}
		// 这里根据你的接口实际参数调整
		let res = await getUserMoneyList(params).then(res => {
			if (page.value === 1) {
				// 第一页直接赋值
				moneyList.value = res.data;
			} else {
				// 追加数据
				moneyList.value = [...moneyList.value, ...res.data];
			}
			page.value = res.current_page;
			lastPage.value = res.last_page;
		}).catch(err => {
			loading.value = false
			console.error(err)
		}).finally(res => {
			loading.value = false;
			uni.hideLoading()
		})
	}

	onMounted(() => {
		fetchMoneyList()
	})

	onReachBottom(()=>{
		loading.value=true;
		console.log(lastPage.value+"_______"+page.value);
		if(lastPage.value<=page.value){
				noMore.value="没有更多了";
				// 3秒后重置noMore状态
				setTimeout(() => {
					loading.value = false;
				}, 3000);
		}else{
			noMore.value="加载中...";
			page.value+=1;
			fetchMoneyList();
		}
	});


</script>

<style scoped>
	.money-page {
		min-height: 100vh;
		background: #f6f7fb;
		display: flex;
		flex-direction: column;
	}
  
	.money-list{
		margin-top: 90rpx;
	}


	.top-title {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}
	.money-list {
		background: #fff;
		margin: 12rpx 0;
		padding: 0 24rpx;
	}
	.money-item {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}
	.money-item:last-child {
		border-bottom: none;
	}
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}
	.item-remark {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}
	.item-type {
		font-size: 24rpx;
		color: #888;
	}
	.item-info {
		display: flex;
		align-items: center;
		margin-top: 4rpx;
	}
	.item-label {
		font-size: 24rpx;
		color: #666;
		min-width: 120rpx;
	}
	.item-value {
		font-size: 24rpx;
		color: #333;
		flex: 1;
	}
	.empty-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}
	.empty-img {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 18rpx;
	}
	.empty-text {
		font-size: 26rpx;
		color: #888;
	}
	.loading-text {
		text-align: center;
		padding: 20rpx;
		color: #999;
		background: #f6f7fb;;
	}


	.mui-content > .mui-table-view:first-child {
	    margin-top: 15px;
	}
	.mui-table-view {
	    position: relative;
	    margin-top: 0;
	    margin-bottom: 0;
	    padding-left: 0;
	    list-style: none;
	    background-color: #fff;
	}
	.record-list {
	    background: #FFF;
	    margin: 0;
	}
	.bg-white {
	    background: #fff;
	}
	.bg-white {
	    background: #fff !important;
	}
	.margin-b-70 {
	    margin-bottom: 70px !important;
	}
	.margin-t-0 {
	    margin-top: 0 !important;
	}
	.mui-ios .mui-table-view-cell {
	    -webkit-transform-style: preserve-3d;
	    transform-style: preserve-3d;
	}
	.mui-table-view .mui-media, .mui-table-view .mui-media-body {
	    overflow: hidden;
	}
	.mui-table-view-cell {
	    position: relative;
	    overflow: hidden;
	    padding: 13px 15px;
	    -webkit-touch-callout: none;
	}

	.mui-table-view-cell:after {
	    position: absolute;
	    right: 0;
	    bottom: 0;
	    left: 15px;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	    background-color: #e8e8e8;
	}
	.mui-pull-left {
	    float: left;
	}
	.margin-r-10 {
	    margin-right: 10px;
	}
	.mui-table-view .mui-media, .mui-table-view .mui-media-body {
	    overflow: hidden;
	}
	.record-list .pd-name {
	    font-size: .9rem;
	    line-height: 1.3rem;
	    color: #333;
	}
	.mui-table-view-cell p {
	    margin-bottom: 0;
	}
	.font-bold {
	    font-weight: 600;
	}
	.font16 {
	    font-size: .8rem !important;
	}
	.mui-table-view-cell > a:not(.mui-btn) {
	    position: relative;
	    display: block;
	    overflow: hidden;
	    margin: -11px -15px;
	    padding: inherit;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: inherit;
	}

	.mui-pull-right {
	    float: right;
	}
	.txt-green {
	    color: #28a745 !important;
	}
	.padding-t-5 {
	    padding-top: 5px !important;
	}
	.mui-row:before, .mui-row:after {
	    display: table;
	    content: ' ';
	}
	.mui-row:after {
	    clear: both;
	}
	.mui-row:before, .mui-row:after {
	    display: table;
	    content: ' ';
	}

	.mui-row > .mui-col-xs-6 {
	    float: left;
	}
	.record-list .pd-text {
	    font-size: .65rem;
	    color: #999;
	    line-height: 1rem;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 1;
	    overflow: hidden;
	}
	.mui-table-view-cell p {
	    margin-bottom: 0;
	}
	.mui-col-xs-6 {
	    width: 50%;
	}
	.mui-ellipsis {
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	.mui-row > .mui-col-xs-6 {
	    float: left;
	}
	.record-list .pd-text {
	    font-size: .65rem;
	    color: #999;
	    line-height: 1rem;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 1;
	    overflow: hidden;
	}
	.mui-table-view-cell p {
	    margin-bottom: 0;
	}
	.mui-col-xs-6 {
	    width: 50%;
		position: relative;
		min-height: 1px;
	}
	.txt-right {
	    text-align: right !important;
	}
	.txt-red {
	    color: #F00 !important;
	}
</style>
